<script setup>
import { ref,defineEmits, defineProps, watch, onMounted} from 'vue'
// import imag from '../assets/images/animate1/0000.png'
const props = defineProps({
  step: {
    type: Number,
    default: 0,
    required: true
  }
})
const getNumber = (num) => {
    return num < 10 ? '0' + num : num
}
const step = ref(props.step)
const icons = ref([
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    },
    {
        status:false,
        isDone:false
    }
])
watch(()=>props.step,(newVal,oldVal) => {
    for (let index = 0; index < icons.value.length; index++) {
        // console.log(newVal,index);
        if(index<newVal){
            icons.value[index].isDone = true // 待处理
            if(index == newVal-1){
                icons.value[index].isDone = true // 已处理
            }
        }else{
            icons.value[index].status = false
            icons.value[index].isDone = false
        }
    }
    
})

const setDone = (idx) => {
    // console.log(props.step);
    for (let index = 0; index < icons.value.length; index++) {
        icons.value[index].isDone = false;
            icons.value[index].status = false// 
        if(index<idx){
            icons.value[index].status = 2 // 
            if(index===3){
                icons.value[index].isDone = false
                icons.value[index].status = 1// 
            }
        }
        if(index == idx){
            icons.value[idx].isDone = true;
        }
        if(index>idx){
            icons.value[index].isDone = false
        }
    }
}
onMounted(()=>{
    
})
const emit = defineEmits(['change'])
</script>

<template>
  <div class="animates">
    <div v-for="(icon,index) in icons" :class="`icon icon${index+1}`" :key="index" @click="setDone(index)">
        <template v-if="index>0">
            <div class="jt">
                <div class="trans">
                <div class="run" v-show="icon.status!=false || icon.isDone==true" :class="{runGo:icon.isDone}"></div>
                </div>
            </div>
        </template>
        <div class="title" :class="{done:icon.isDone || icon.status!=false}"></div>
        <div class="imgBg" :class="{start:icon.isDone}" v-show="icon.isDone">
            <div class="light"></div>
        </div>
        <div class="bg" v-show="icon.isDone" :class="{go:icon.isDone}"></div>
        <div class="startType2" v-show="icon.status===2">
           
        </div>
        <div class="startType1" v-show="icon.status===1">
           
        </div>
        <!-- <div class="gug" v-show="icon.status===1"></div> -->
        <div class="startType" v-show="icon.status===false && icon.isDone===false"></div>
    </div>
  </div>
</template>

<style scoped>
.animates {    
    width: 870px;
    height: 615px;
    /* background: url(/src/assets/images/bg_pop@1x.png) no-repeat -280px -66px; */
    position: relative;    
    margin-top: 5px;
    margin-left: 55px;
}
.icon {
    width: 240px;
    height: 240px;
    position: absolute;
    cursor: pointer;
    /* border: 1px solid; */
}
.jt {
    background: url(../assets/images/1-1_00000.png);
    background-size: 100%;
    width: 265px;
    height: 130px;
    position: absolute;
    left: 90px;
    top: 39px;
}
.run {
    background: url(../assets/images/1-2_00000.png);
    background-size: 100%;
    width: 265px;
    height: 130px;
}
.icon5 .trans {

    transform: rotate(180deg);
}
.icon5 .run {
    background: url(../assets/images/2-2_00000.png);
    background-size: 100%;
}
.icon6 .trans {

transform: rotate(180deg);
}
.icon6 .run {
background: url(../assets/images/2-2_00000.png);
background-size: 100%;
}
.run.runGo{

    animation: jt 1s linear infinite;
}
.icon5 .run.runGo{
    animation: jt 1s linear infinite reverse;
}
.icon6 .run.runGo{
    animation: jt 1s linear infinite reverse;
}
.icon4 .jt {
    transform: rotate(233deg);
    left: -128px;
    top: 45px;
}
.gug {
    background: url(../assets/images/gug.png);
    width: 225px;
    height: 102px;
    margin: 110px 0 0 8px;
}
.icon5 .jt {
    background: url(../assets/images/2-1_00000.png);
    background-size: 100%;
    transform: rotate(180deg);
    left: -120px;
    top: 139px;
}

.icon6 .jt {
    transform: rotate(234deg);
    left: -132px;
    top: 46px;
}
.title {
    width: 95px;
    height: 72px;
    background-repeat: no-repeat;
    background-position:center ;
    position: absolute;
    top: 15px;
    left: 40px;
    opacity:0.4;
}
.done.title{
    opacity: 1;
}
.icon1 .title{
    background-image: url(../assets/images/title1.png) ;
    background-size:54.5px ;
}

.icon2 .title{
    background-image: url(../assets/images/title2.png) ;
    background-size:85px ;
}

.icon3 .title{
    background-image: url(../assets/images/title3.png) ;

    background-size:94px ;
}

.icon4 .title{
    background-image: url(../assets/images/title4.png) ;

    background-size:54.5px ;
}

.icon5 .title{
    background-image: url(../assets/images/title6.png) ;

    background-size:54.5px ;
}
.icon6 .title{
    background-image: url(../assets/images/title4.png) ;

background-size:54.5px ;
}

.icon7 .title{
    background-image: url(../assets/images/title5.png) ;

background-size:54.5px ;
}
.bg {
    background-image: url(../assets/images/bgguang.png);
    width:211px;
    height:136px;    margin-top: 74px;
    margin-left: 14px;
}
.go.bg{
    animation: guang 0.6s alternate infinite ;
    animation-iteration-count: 3; /* 播放3次 */
    animation-fill-mode: forwards;
    z-index: 0;
}
.imgBg {
    width: 100%;
    height: 100%;
    background-size: 240px;
    position: absolute;
    top: 41px;
    left: 41px;
    background-size: 158px;
    background-position:0 0;
    width: 158px;
    height: 158px;
    z-index: 10;
}
.startType,.startType1,.startType2 {
    position: absolute;
    top: 41px;
    left: 41px;
    background-size: 158px;
    background-position:0 0;
    width: 158px;
    height: 158px;
}
.icon1 .startType{
    background-image: url(../assets/images/start1.png);
}
.icon2 .startType{
    background-image: url(../assets/images/start2.png);
}
.icon3 .startType{
    background-image: url(../assets/images/start3.png);
}
.icon4 .startType{
    background-image: url(../assets/images/start4.png);
}
.icon5 .startType{
    background-image: url(../assets/images/start5.png);
}

.icon6 .startType{
    background-image: url(../assets/images/start4.png);
}
.icon7 .startType{
    background-image: url(../assets/images/start5.png);
}

.icon1 .startType1{
    background-image: url(../assets/images/start12.png);
}
.icon2 .startType1{
    background-image: url(../assets/images/start22.png);
}
.icon3 .startType1{
    background: url(../assets/images/start32.png);
}
.icon4 .startType1{
    background-image: url(../assets/images/start42.png);
}
.icon5 .startType1{
    background-image: url(../assets/images/start52.png);
}
.icon6 .startType1{
    background-image: url(../assets/images/start42.png);
}
.icon7 .startType1{
    background-image: url(../assets/images/start52.png);
}

.icon1 .startType2{
    background-image: url(../assets/images/start11.png);
}
.icon2 .startType2{
    background-image: url(../assets/images/start21.png);
}
.icon3 .startType2{
    background-image: url(../assets/images/start31.png);
}
.icon4 .startType2{
    background-image: url(../assets/images/start41.png);
}
.icon5 .startType2{
    background-image: url(../assets/images/start51.png);
}

.icon6 .startType2{
    background-image: url(../assets/images/start41.png);
}
.icon7 .startType2{
    background-image: url(../assets/images/start51.png);
}

.light {
    background: url(../assets/images/lightyellow.png) no-repeat;
    width: 142px;
    height: 53px;
    margin-top: 78px;
    margin-left: 8px;
}
.icon1 {
    top:0;
    left: 420px;
    z-index: 15;
}
.icon2 {
    top:97px;
    left: 210px;
    z-index: 14;
}

.icon3 {
    top:190px;
    left: 0;
    z-index: 13;
}

.icon4 {
    top:284px;
    left: 210px;
    z-index: 12;
}

.icon5 {
    top:190px;
    left: 422px;
    z-index: 11;
}
.icon6 {
    top:284px;
    left: 630px;
    z-index: 10;
}

.icon7 {
    top:380px;
    left: 422px;
    z-index: 9;
}
.icon1 .imgBg{
    background-image: url(../assets/images/1@0.5x.png);
}
.icon2 .imgBg{
    background-image: url(../assets/images/2@0.5x.png);
}
.icon3 .imgBg{
    background-image: url(../assets/images/3@0.5x.png);
}
.icon4 .imgBg{
    background-image: url(../assets/images/4@0.5x.png);
}
.icon5 .imgBg{
    background-image: url(../assets/images/5@0.5x.png);
}
.icon6 .imgBg{
    background-image: url(../assets/images/4@0.5x.png);
}
.icon7 .imgBg{
    background-image: url(../assets/images/5@0.5x.png);
}
.icon1 .imgBg.start {
    animation: animIcon1 2s infinite steps(24); 
}
.icon2 .imgBg.start {
    animation: animIcon2 4s infinite steps(48); 
}
.icon3 .imgBg.start {
    animation: animIcon3 4s infinite steps(48); 
}
.icon4 .imgBg.start {
    animation: animIcon4 4s infinite steps(48); 
}
.icon5 .imgBg.start {
    animation: animIcon5 4s infinite steps(47); 
}
.icon6 .imgBg.start {
    animation: animIcon4 4s infinite steps(48); 
}
.icon7 .imgBg.start {
    animation: animIcon5 4s infinite steps(47); 
}
@keyframes animIcon1 {
  0%   { background-position-y: 0px; }
  100% { background-position-y: calc(-158px * 24); }
}

@keyframes animIcon2 {
  0%   { background-position-y: 0px; }
  100% { background-position-y: calc(-158px * 48); }
}
@keyframes animIcon3 {
  0%   { background-position-y: 0px; }
  100% { background-position-y: calc(-158px * 48); }
}
@keyframes animIcon4 {
  0%   { background-position-y: 0px; }
  100% { background-position-y: calc(-158px * 48); }
}
@keyframes animIcon5 {
  0%   { background-position-y: 0px; }
  100% { background-position-y: calc(-158px * 47); }
}

@keyframes jt{
    /* 0%   { transform:translate(-30px,15px) ; } */
  100% { transform:translate(-30px,15px) }
}
@keyframes guang{
    0%   { opacity:0.3}
  100% { opacity:0.8 }
}
</style>
